<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
      <template #create_time="{ record }">
        {{ tool.dateFormat(record.create_time, 'yyyy-MM-dd hh:mm:ss', '-') }}
      </template>

      <template #icon="{ record }">
        <a-avatar shape="square">
          <img :src="record.icon?record.icon:'/nopic.png'" style="object-fit: cover" />
        </a-avatar>
      </template>
      <template #status="{ record }">
        <a-switch
            :checked-value="1"
            unchecked-value="2"
            @change="switchStatus($event, record.id,'status')"
            :default-checked="record.status == 1"
        />
      </template>

      <template #is_default="{ record }">
        <a-switch
            :checked-value="1"
            unchecked-value="2"
            @change="switchStatus($event, record.id,'is_default')"
            :default-checked="record.is_default == 1"
        />
      </template>
      <template #operationBeforeExtend="{ record }">
        <a-dropdown
            trigger="hover"
            @select="selectOperation($event, record)"
        >
          <a-link>
            <icon-double-right/>
            更多
          </a-link>
          <template #content>
            <a-doption value="configInfo" v-auth="['payment:method:config']"  v-if="record.channel_type!='ios_app'">支付参数配置</a-doption>
            <a-doption value="memberInfo" v-auth="['payment:member:save']">商品产品配置</a-doption>
          </template>
        </a-dropdown>
      </template>
    </ma-crud>

    <alipay-config ref="alipayConfigRef" @success="() => crudRef.refresh()"/>
    <weixin-config ref="weixinConfigRef" @success="() => crudRef.refresh()"/>
    <unipay-config ref="unipayConfigRef" @success="() => crudRef.refresh()"/>

    <heepay-config ref="heepayConfigRef" @success="() => crudRef.refresh()"/>

    <fuiou-config ref="fuiouConfigRef" @success="() => crudRef.refresh()"/>

    <hlb-config ref="hlbConfigRef" @success="() => crudRef.refresh()"/>

    <member-info ref="memberInfoRef"/>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import paymentMethod from '@/api/payment/paymentMethod'
import { Message } from '@arco-design/web-vue'
import tool from '@/utils/tool'
import * as common from '@/utils/common'

import alipayConfig from './components/alipayConfig.vue'
import weixinConfig from './components/weixinConfig.vue'
import unipayConfig from './components/unipayConfig.vue'
import memberInfo from './components/setMember.vue'

import HeepayConfig from './components/HeepayConfig.vue'

import fuiouConfig from './components/fuiouConfig.vue'
import hlbConfig from './components/hlbConfig.vue'

const crudRef = ref()
const alipayConfigRef = ref()
const weixinConfigRef = ref()
const unipayConfigRef = ref()
const heepayConfigRef = ref()
const fuiouConfigRef = ref()
const hlbConfigRef = ref()
const memberInfoRef = ref()


const selectOperation = (value, record) => {
  console.log('----111-----');
  if (value === 'configInfo') {
    console.log('----22222-----');
    console.log(record)
    if(record.method=='80001'){
      alipayConfigRef.value.open(record)
    }else if(record.method=='80002'){
      weixinConfigRef.value.open(record)
    }
    else if(record.method=='80003'){
      unipayConfigRef.value.open(record)
    }
    else if(record.method=='80006'){
      heepayConfigRef.value.open(record)
    }
    else if(record.method=='80008'){
      fuiouConfigRef.value.open(record)
    }
    else if(record.method=='80009'){
      hlbConfigRef.value.open(record)
    }
    return
  }else if(value=='memberInfo'){
    memberInfoRef.value.open(record)
  }
}
const numberOperation = (newValue, id, numberName) => {
  paymentMethod.numberOperation({ id, numberName, numberValue: newValue }).then( res => {
    res.success && Message.success(res.message)
  }).catch( e => { console.log(e) } )
}

const switchStatus = (statusValue, id, statusName) => {
  paymentMethod.changeStatus({ id, statusName, statusValue }).then( res => {
    res.success && Message.success(res.message)
  }).catch( e => { console.log(e) } )
}


const options = reactive({
  id: 'us_payment_method',
  rowSelection: {
    showCheckedAll: true
  },
  bordered:{ wrapper: true, cell: true },
  pk: 'id',
  operationColumn: true,
  operationColumnWidth: 220,
  formOption: {
    viewType: 'modal',
    width: 600
  },
  api: paymentMethod.getList,
  recycleApi: paymentMethod.getRecycleList,
  add: {
    show: true,
    api: paymentMethod.save,
    auth: ['payment:method:save']
  },
  edit: {
    show: true,
    api: paymentMethod.update,
    auth: ['payment:method:update']
  },
  delete: {
    show: true,
    api: paymentMethod.deletes,
    auth: ['payment:method:delete'],
    realApi: paymentMethod.realDeletes,
    realAuth: ['payment:method:realDeletes']
  },
  recovery: {
    show: true,
    api: paymentMethod.recoverys,
    auth: ['payment:method:recovery']
  }
})

const columns = reactive([
  {
    title: "ID",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    width:80,
    commonRules: {
      required: true,
      message: "请输入ID"
    }
  },
  {
    title: "支付名称",
    width:180,
    dataIndex: "title",
    formType: "input",
    search: true,
    commonRules: {
      required: true,
      message: "请输入支付名称"
    }
  },
  {
    title: "图标",
    dataIndex: "icon",
    formType: "upload",
    onlyData: true,
    returnType: "url",
    multiple: false,
    chunk: false,
    type: "image"
  },
  {
    title: "设备",
    dataIndex: "device",
    formType: "select",
    search: true,
    commonRules: {
      required: true,
      message: "请输入设备 1web 2android 3ios,4.h5"
    },
    dict: { data: [
        { label: 'web', value: 1 },
        { label: 'android', value: 2 },
        { label: 'ios', value: 3 },
        { label: 'h5', value: 4 }
      ], translation: true },
  },
  {
    title: "支付方式",
    dataIndex: "method",
    formType: "select",
    search: true,
    commonRules: {
      required: true,
      message: "请输入支付方式"
    },
    dict: { data: [
        { label: '支付宝', value: '80001' },
        { label: '微信', value: '80002' },
        { label: 'IOS', value: '80005' },
        { label: 'HFP', value: '80006' },
        { label: 'FOP', value: '80008' },
        { label: 'HLP', value: '80009' },
      ], translation: true },
    cascaderItem: ['channel_type'],
  },
  {
    title: "渠道名称",
    dataIndex: "channel_name",
    width:240,
    formType: "input",
    search: true,
    commonRules: {
      required: true,
      message: "请输入渠道名称"
    }
  },
  {
    title: "渠道类型",
    dataIndex: "channel_type",
    width:160,
    formType: "select",
    dict: { url: 'payment/method/typeList?method={{key}}', props: { label: 'label', value: 'value' }, translation: true},
    commonRules: {
      required: true,
      message: "请输入渠道类型"
    }
  },
  {
    title: "排序",
    dataIndex: "sort",
    formType: "input",
    commonRules: {
      required: true,
      message: "请输入排序"
    }
  },
  {
    title: "状态",
    dataIndex: "status",
    formType: "radio",
    search: true,
    commonRules: {
      required: true,
      message: "请输入状态 1可用0不可用"
    },
    dict: { data: [
        { label: '可用', value: 1 },
        { label: '不可用', value: 2 },

      ], translation: true },
  },
  {
    title: "渠道配置",
    dataIndex: "setting",
    formType: "textarea",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入渠道配置"
    }
  },
  {
    title: "是否默认",
    dataIndex: "is_default",
    formType: "radio",
    dict: { data: [
        { label: '可用', value: 1 },
        { label: '不可用', value: 2 },
      ], translation: true },
  },
  {
    title: "支付超时时间",
    dataIndex: "timeout",
    addDisplay: false,
    editDisplay: false,
    formType: "input",
    commonRules: {
      required: true,
      message: "请输入支付超时时间"
    }
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    width:180,
    formType: "range",
    search: true,
    addDisplay: false,
    editDisplay: false,
    showTime: true
  },
  {
    title: "",
    dataIndex: "update_time",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "",
    dataIndex: "delete_time",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  }
])
</script>
<script> export default { name: 'payment:method' } </script>